<template>
	<view class="modal-box" v-if="show">
		<u-modal v-model="show" width="100%" :showTitle="false" :mask-close-able="true" :show-confirm-button="false">

			<view class="content-box ">
				<view class="back-box cover-position-style" v-if="backName">
					<mBack ref="mBack" :name="backName" @getGameResult="close"></mBack>
				</view>
				<view class="live-box cover-position-style" @click="close" v-if="type=='live'">
					<view class="center-content" @click.stop>
						<view class="live-content-box">
							<view class="live-title">
								直播
								<view class="bottom-line">
									<view class="line-content"></view>
								</view>
								<view class="close-icon" @click="close">
									<image class="close-icon-img"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a4650d9479964fee9685179a9335462d.png"
										mode="aspectFill"></image>
								</view>
							</view>

							<view class="title-box">
								<view class="left-tip">
									<view class="tip-icon"></view>
									<view class="tip-text">直播时长</view>
								</view>
								<view class="right-content">1小时</view>

							</view>
							<view class="title-box">
								<view class="left-tip">
									<view class="tip-icon"></view>
									<view class="tip-text">直播收益</view>
								</view>
								<view class="right-content"></view>

							</view>

							<view class="reward-list">
								<scroll-view :scroll-x="true" style="white-space: nowrap; " class="scroll-content">
									<view class="reward-item" v-for="(item,index) in rewardList" :key="index">
										<image class="reward-item-icon" :src="item.icon" mode="aspectFill"></image>
										<view class="reward-num">{{item.num}}</view>
									</view>
								</scroll-view>

							</view>

							<view class="consume-box">
								<image class="consume-icon"
									src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/c9864f9a483748a78c3aad0a7fd21f15.png"
									mode="aspectFill"></image>
								<view class="consume-number">
									<text class="num">{{nowPower}}</text>
									/
									<text class="need-num">{{liveNeedPower}}</text>
								</view>
							</view>


							<view class="btn-box">

								<view class="btn-item">
									<view class="btn-content get-reward-btn" @click="handleStartLive">开始直播</view>
								</view>

							</view>



						</view>
					</view>

				</view>
				
				<view class="girls-room-list cover-position-style" v-if="type=='roomList'">
					
					<mGirlsRoomList ref="mGirlsRoomList" @getGameResult="handleResult"></mGirlsRoomList>
				</view>

				



			</view>

		</u-modal>
	</view>
</template>

<script>
	// import {
	// 	mapGetters,
	// 	mapMutations,
	// 	mapState
	// } from "vuex";

	import mGirlsRoomList from "@/components/m-girls-room-list/index.vue"
	import mBack from "@/components/m-back/index.vue"

	export default {
		props: {

		},
		components: {
			mGirlsRoomList,
			mBack
		},
		filters: {

		},

		data() {
			return {
				show: false,
				backName: "",
				liveNeedPower: 1,
				nowPower: 12,

				type: "",
				rewardList: [{
						name: "金币",
						type: "prop",
						num: 10000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7a219d3867854845bd5dbac5568d9b52.png",
						isEmpty: false
					},
					{
						name: "以太币",
						type: "prop",
						num: 2000,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/dfda2fb6be7744a0a739ba0f50eb4f86.png",
						isEmpty: false
					},
					{
						name: "改名卡",
						type: "prop",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e9dc4476a7c84128a8a82769b6bf6de2.png",
						isEmpty: false
					},
					{
						name: "抽奖券",
						type: "equipment",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/939dfdef23b44b3bbc10401de05538bc.png",
						isEmpty: false
					},
					{
						name: "回忆碎片",
						type: "equipment",
						num: 1,
						icon: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/15ab0cd4e30346a8ab20d9d35401a45d.png",
						isEmpty: false
					},
				]

			}
		},

		computed: {},
		watch: {

		},
		created() {},
		mounted() {

		},
		methods: {
			handleStartLive() {
				if (this.liveNeedPower <= this.nowPower) {
					this.$emit('result', {type:'toLive'})
					this.close()
				} else {
					this.$emit('result', {type:'notEnough'})
				}

			},
			handleResult(data){
			
				this.$emit('result', {type:'jumpStory',storyId:data})
			},
			close() {
				this.show = false
			},
			open(type, backName) {
				this.type = type
				this.backName = backName
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal-box {
		pointer-events: fill;
	}



	.content-box {
		position: relative;
		box-shadow: 0rpx 8rpx 40rpx -2rpx rgba(0, 0, 0, 0);
		border-radius: 12rpx;
		height: 100vh;

		background-color: rgba(255, 255, 255, 0);
		backdrop-filter: blur(15rpx);
		z-index: 999999999999999999999;
		
		.back-box{
			pointer-events: none;
			z-index: 3;
		}
		
		.girls-room-list{
			pointer-events: fill;
			z-index: 2;
		}

		.live-box {
	
			box-sizing: border-box;
			padding: 0 40rpx;
			z-index: 2;

			.center-content {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 600rpx;
				// height: 700rpx;
				// background-color: rgba(255, 255, 255, .6);
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 6rpx;
				background-color: rgba(255, 255, 255, 0);
				backdrop-filter: blur(15rpx);
				box-shadow: 0rpx 0rpx 8rpx rgba(255, 255, 255, .8);

				.live-content-box {
					width: 100%;
					height: 100%;
					background-color: rgba(255, 255, 255, .8);
					border-radius: 10rpx;
					box-shadow: 0rpx 0rpx 8rpx rgba(255, 255, 255, .8);
					overflow: hidden;

					.live-title {
						position: relative;
						width: 100%;
						height: 60rpx;
						text-align: center;
						font-size: 30rpx;
						color: #5e5c5d;
						box-sizing: border-box;
						padding: 0rpx 20rpx;
						letter-spacing: 2rpx;
						line-height: 60rpx;

						.bottom-line {
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							width: 100%;
							height: 2rpx;
							box-sizing: border-box;
							padding: 0rpx 20rpx;

							.line-content {
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, .3);
								opacity: 0.4;
							}
						}

						.close-icon {
							position: absolute;
							right: 20rpx;
							top: 50%;
							transform: translateY(-50%);
							width: 50rpx;
							height: 50rpx;

							.close-icon-img {
								width: 100%;
								height: 100%;
							}

						}
					}

					.title-box {
						width: 100%;
						height: 40rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						box-sizing: border-box;
						padding: 0rpx 20rpx;
						margin-top: 20rpx;
						margin-bottom: 20rpx;

						.left-tip {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							margin-right: 20rpx;

							.tip-icon {
								width: 2rpx;
								height: 20rpx;
								margin-right: 10rpx;
								background-color: #5e5c5d;
								opacity: 0.6;

							}

							.tip-text {
								font-size: 24rpx;
								line-height: 24rpx;
								color: #5e5c5d;
							}

						}

						.right-content {
							flex: 1;
							height: 100%;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #5e5c5d;
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}
					}

					.consume-box {
						width: 100%;
						height: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 10rpx;

						.consume-icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;

						}

						.consume-number {
							height: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							font-size: 20rpx;
							color: #5e5c5d;
							line-height: 20rpx;

							.num {
								color: #55d8c0;
							}

						}
					}

					.reward-list {
						width: 100%;
						box-sizing: border-box;
						padding: 0rpx 20rpx;
						height: 120rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.scroll-content {
							width: 100%;
							height: 110rpx;

							.reward-item {
								position: relative;
								display: inline-block;
								width: 100rpx;
								height: 100rpx;
								background-color: #fff;
								margin-right: 10rpx;

								box-sizing: border-box;
								border: 2rpx solid #acc1dd;

								border-top-left-radius: 15rpx;
								border-bottom-right-radius: 15rpx;

								overflow: hidden;

								.reward-num {
									position: absolute;
									right: 0rpx;
									bottom: 0rpx;
									display: inline-block;
									padding: 0 8rpx;
									font-size: 16rpx;
									color: #fff;
									background-color: rgba(0, 0, 0, .3);
									// border-radius: 10rpx;
									line-height: 20rpx;

								}


								.reward-item-icon {
									width: 100%;
									height: 100%;

								}
							}

						}

					}

					.btn-box {
						width: 100%;
						height: 60rpx;
						// background-color: pink;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 20rpx;
						margin-bottom: 20rpx;

						.btn-item {
							width: 180rpx;
							height: 100%;
							margin-right: 20rpx;
							font-size: 24rpx;
							line-height: 60rpx;
							background-color: transparent;
							border-radius: 5rpx;
							box-shadow: 0rpx 0rpx 4rpx #fff;
							box-sizing: border-box;
							padding: 2rpx;

							.btn-content {
								width: 100%;
								height: 100%;
								background-color: #f3efec;
								color: #000;
								border-radius: 5rpx;
								display: flex;
								justify-content: center;
								align-items: center;

							}

							.live-btn {
								// background-color: #bea97c;
							}

							.get-reward-btn {
								background-color: #fef9d9;
							}



							&:last-child {
								margin-right: 0rpx;
							}
						}

					}
				}

			}


		}

	}
	
	.cover-position-style{
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
	}

	.flex-cloumn {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
</style>